import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:provider/provider.dart';

import '../../common/config.dart';
import '../../generated/assets.dart';

class IntroScreen extends StatefulWidget {
  /// Creates a [IntroScreen].
  const IntroScreen({super.key});

  @override
  State<IntroScreen> createState() => _IntroScreenState();
}

class _IntroScreenState extends State<IntroScreen> {
  final List<_Intro> intros = [
    const _Intro(
      title: 'Welcome to Daily Online part-time!',
      subtitle: 'Your Guide to Daily Online part-time',
      desc:
          'Earn money through digital ecommerce, affiliate marketing, social media, Amazon FBA, and gaming.',
      cover: Assets.iconIntroBg1,
      index: Assets.iconDot1,
    ),
    const _Intro(
      title: 'Explore Our Ideas!',
      subtitle: 'Discover How to Make Money Online',
      desc:
          'Earn money using the app, such as becoming a social media consultant, starting a dropshipping business, or earning coins by playing games.',
      cover: Assets.iconIntroBg2,
      index: Assets.iconDot2,
    ),
    const _Intro(
      title: 'Start Earning Today!',
      subtitle: 'Get Started with Daily Online part-time',
      desc:
          'Start earning today and become independent from various platforms with our app.',
      cover: Assets.iconIntroBg3,
      index: Assets.iconDot3,
    ),
  ];

  final _IntroIndex index = _IntroIndex();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ChangeNotifierProvider.value(
          value: index,
          builder: (context, child) {
            return PopScope(
              canPop: context.watch<_IntroIndex>().canPop,
              onPopInvoked: onClickPrevious,
              child: Column(
                mainAxisSize: MainAxisSize.max,
                children: [
                  Padding(
                    padding: const EdgeInsets.only(
                      top: 32,
                      right: 16,
                      bottom: 6,
                    ),
                    child: Align(
                      alignment: Alignment.centerRight,
                      child: ElevatedButton(
                        onPressed: onClickSkip,
                        child: Image.asset(
                          Assets.iconSkip,
                          height: 30,
                        ),
                      ),
                    ),
                  ),
                  Expanded(
                    flex: 1,
                    child: IndexedStack(
                      index: context.watch<_IntroIndex>().value,
                      children: intros.map(intro).toList(),
                    ),
                  ),
                ],
              ),
            );
          },
        ),
      ),
    );
  }

  @override
  void initState() {
    super.initState();
  }

  Widget intro(_Intro intro) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      mainAxisSize: MainAxisSize.max,
      children: [
        Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(
              intro.title,
              maxLines: 1,
              style: const TextStyle(
                fontSize: 17,
                color: Color(0xFF4744d3),
                overflow: TextOverflow.ellipsis,
                fontWeight: FontWeight.bold,
              ),
            ),
            const SizedBox(height: 6),
            Text(
              intro.subtitle,
              maxLines: 1,
              style: const TextStyle(
                fontSize: 14,
                color: Colors.white,
                overflow: TextOverflow.ellipsis,
                fontWeight: FontWeight.bold,
              ),
            ),
            const SizedBox(height: 6),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 80),
              child: Text(
                intro.desc,
                style: const TextStyle(
                  fontSize: 10,
                  color: Color(0x79ffffff),
                  overflow: TextOverflow.visible,
                ),
                textAlign: TextAlign.center,
              ),
            ),
          ],
        ),
        Image.asset(
          intro.cover,
          width: 300,
          height: 300,
        ),
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 32),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Image.asset(intro.index, height: 10),
              IconButton(
                  onPressed: onClickNext,
                  icon: Container(
                    width: 55,
                    height: 55,
                    decoration: const BoxDecoration(
                        shape: BoxShape.circle, color: Color(0xff4744d3)),
                    child: const Center(
                      child: Text(
                        'Next',
                        style: TextStyle(fontWeight: FontWeight.bold),
                      ),
                    ),
                  )),
            ],
          ),
        ),
      ],
    );
  }

  void onClickPrevious(bool didPop) {
    if (index.value > 0) {
      index.go(index.value - 1);
    }
  }

  void onClickNext() {
    if (index.value + 1 < intros.length) {
      index.go(index.value + 1);
    } else {
      context.read<Config>().stepIn(OnboardingStep.age);
      context.go('/home');
    }
  }

  void onClickSkip() {
    context.read<Config>().stepIn(OnboardingStep.age);
    context.go('/home');
  }
}

class _Intro {
  final String title;
  final String subtitle;
  final String desc;
  final String cover;
  final String index;

  const _Intro({
    required this.title,
    required this.subtitle,
    required this.desc,
    required this.cover,
    required this.index,
  });
}

class _IntroIndex extends ChangeNotifier {
  int _value = 0;
  bool _canPop = true;

  int get value => _value;

  bool get canPop => _canPop;

  void go(int value) {
    _value = value;
    _canPop = value <= 0;
    notifyListeners();
  }

}
